<template>
  <div>
    <!-- one -->
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;营 业 执 照:
    <div style="margin-top: -30px;margin-left: 210px;">
      <el-upload
        class="avatar-uploader"
        ref="upload1"
        action
        :auto-upload="false"
        :limit="1"
        multiple
        accept="application/jpg"
        :file-list="fileList1"
        list-type="picture"
        :on-change="handlerChange1"
        style="width:200px;"
      >
        <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <!-- two -->
    <br />
    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;组 织 机 构 代 码 证:
    <div style="margin-top: -35px;margin-left: 210px;">
      <el-upload
        class="avatar-uploader"
        ref="upload2"
        action
        :auto-upload="false"
        :limit="1"
        multiple
        accept="application/jpg"
        :file-list="fileList2"
        list-type="picture"
        :on-change="handlerChange2"
        style="width:200px;"
      >
        <img v-if="imageUrl2" :src="imageUrl2" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <!-- three -->
    <br />
    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;道 路 运 输 许 可 证:
    <div style="margin-top: -35px;margin-left: 210px;">
      <el-upload
        class="avatar-uploader"
        ref="upload3"
        action
        :auto-upload="false"
        :limit="1"
        multiple
        accept="application/jpg"
        :file-list="fileList3"
        list-type="picture"
        :on-change="handlerChange3"
        style="width:200px;"
      >
        <img v-if="imageUrl3" :src="imageUrl3" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <!-- four -->
    <br />
    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;税 务 登 记 证:
    <div style="margin-top: -35px;margin-left: 210px;">
      <el-upload
        class="avatar-uploader"
        ref="upload4"
        action
        :auto-upload="false"
        :limit="1"
        multiple
        accept="application/jpg"
        :file-list="fileList4"
        list-type="picture"
        :on-change="handlerChange4"
        style="width:200px;"
      >
        <img v-if="imageUrl4" :src="imageUrl4" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <!-- five -->
    <br />
    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;负 责 人 身 份 证:
    <div style="margin-top: -35px;margin-left: 210px;">
      <el-upload
        class="avatar-uploader"
        ref="upload5"
        action
        :auto-upload="false"
        :limit="1"
        multiple
        accept="application/jpg"
        :file-list="fileList5"
        list-type="picture"
        :on-change="handlerChange5"
        style="width:200px;"
      >
        <img v-if="imageUrl5" :src="imageUrl5" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <div style="width:950px;margin-top: 30px;margin-left: 40px;">
      <el-button type="success" size="medium" icon="el-icon-star-off" @click="addAuthentication">保 存</el-button>
    </div>
  </div>
</template>
<script>
var quan;
export default {
  name: "app",
  data() {
    return {
      imageUrl1: "",
      imageUrl2: "",
      imageUrl3: "",
      imageUrl4: "",
      imageUrl5: "",
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      fileList5: []
    };
  },
  mounted: function() {
    quan = this;
  },
  methods: {
    handlerChange1(file, files) {
      quan.fileList1 = files;
    },
    handlerChange2(file, files) {
      quan.fileList2 = files;
    },
    handlerChange3(file, files) {
      quan.fileList3 = files;
    },
    handlerChange4(file, files) {
      quan.fileList4 = files;
    },
    handlerChange5(file, files) {
      quan.fileList5 = files;
    },
    addAuthentication: function() {
      var formData = new FormData();
      quan.fileList1.forEach(function(file) {
        if (file.raw) {
          formData.append("files1", file.raw, file.name);
        }
      });
      quan.fileList2.forEach(function(file) {
        if (file.raw) {
          formData.append("files2", file.raw, file.name);
        }
      });
      quan.fileList3.forEach(function(file) {
        if (file.raw) {
          formData.append("files3", file.raw, file.name);
        }
      });
      quan.fileList4.forEach(function(file) {
        if (file.raw) {
          formData.append("files4", file.raw, file.name);
        }
      });
      quan.fileList5.forEach(function(file) {
        if (file.raw) {
          formData.append("files5", file.raw, file.name);
        }
      });
      //设置图片上传的格式
      let config = {
        "Content-Type": "multipart/form-data"
      };
      quan
        .axios({
          method: "post",
          url:
            "http://localhost:9999/basic/tmsCompany/addImages?access_token=" +
            localStorage.getItem("access_token") +
            "&username=" +
            localStorage.getItem("username"),
          data: formData,
          config: config
        })
        .then(function(res) {
          quan.$message({
            message: res.data.msg,
            type: "success"
          });
          if (res.data.code == 200) {
            window.location.reload();
          }
        });
    }
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 3px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.avatar {
  width: 50px;
  height: 178px;
  display: block;
}
</style>